<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../sass/index.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../jquery-ui-1.10.2/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="../css/bootstrap.css">
	<link rel="stylesheet" href="../jquery-ui-1.10.2/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="../iconfunt/iconfont.css">
	<link rel="stylesheet" href="../css/detailsmusic.css">
	<link rel="stylesheet" href="../css/styles.css">
	<script src="../jquery-ui-1.10.2/jquery-1.9.1.js"></script>
	<script src="../jquery-ui-1.10.2/ui/jquery-ui.js"></script>
</head>
<style>
 .logout{
            display: none;
        }
		body{
			background: url("../images/bjmzc.jpg");
		}
</style>

<body>
	<nav>
        <div class="banxin">
            <main class="s-sub">
                <ul>
                    <li><a href="http://172.168.20.103/HUAWEI/ALL/index.html">首页</a></li>
                    <li><a href="#">华为官网</a></li>
                    <li><a href="">花粉俱乐部</a></li>
                    <li><a href="">V码(优购码)</a></li>
                    <li><a href="#">企业购</a></li>
                    <li><a href="#">Select Regjon</a></li>


                    <li class="gdjc"><a href="#">更多精彩

                            <ul class="gd-ul">
                                <li>EMUI</li>
                                <li>市场应用</li>
                                <li>升为终端云空间</li>
                                <li>开发者联盟</li>
                            </ul>

                    </li>
                    </a>
                </ul>
            </main>
            <main class="s-main">
                <li><a href="logon.html">请登录</a></li>
                <li><a class="logout" href="javascript:document.cookie='phone=;expires=Thu, 01 Jan 1970 00:00:00 UTC;';location='index.html'">退出登录</a></li>
                <li><a href="parking.html">注册</a></li>
                <li><a href="">我的订单</a></li>
                <li class="s-main-lis"><a href="#">客户服务
                        <ul>
                            <li>服务中心</li>
                            <li>联系客服</li>
                        </ul>
                    </a></li>
                <li class="s-main-lis2"><a href="">网站导航
                        <!-- <div class="div1">
                    <article>
                        
                    </article>
                    <article></article>
                    <article></article>
                    <article></article>
                    <article></article>
                </div> -->
                    </a></li>
                <li><a href="">手机导航</a></li>
                <li><a href="#">购物车<span>(0)</span></a></li>
            </main>
        </div>
    </nav>

	<div class="jq22-container" style="padding-top:100px">

		<div class="login-wrap">
			<div class="login-html">
				<input id="tab-1" type="radio" name="tab" class="sign-in" value="1" checked>
				<!-- <a href="http://172.168.20.103/HUAWEI/ALL/index.html"></a> -->
				<label for="tab-1" class="tab" >注册</label>
				<input id="tab-2" type="radio" name="tab" class="sign-up" value="1"><label for="tab-2"
					class="tab"></label>
				<div class="login-form">
					<div class="sign-in-htm">
						<form id="form" action="http://172.168.20.103/HUAWEI/ALL/allphp.php" method="POST">
							<div class="group">
								<label for="user" class="label">电话</label>
								<input id="user" type="text" autocomplete="off" class="input" name="phone"><span></span>
							</div>
							<div class="group">
								<label for="pass" class="label">验证码</label>
								<input id="pass" type="text" autocomplete="off" name="yzm" class="input"
									style="width: 71%;display: inline-block;">
								<span id="yzm"
									style="font-size: 14px; background-color: aliceblue;height: 50px;display: inline-block;padding: 15px 16px;border-radius: 25px; color: aliceblue;   background: rgba(255,255,255,.1)">获取验证码</span>
								<span></span>
							</div>
							<div class="group">
								<label for="user" class="label">密码</label>
								<input id="user" type="password" class="input" name="pwd" autocomplete="off"><span></span>
							</div>
							<div class="group">
								<label for="user" class="label">确认密码</label>
								<input id="user" type="password" class="input" name="pwded" autocomplete="off"><span style="color: red;"></span>
							</div>
							<input type="hidden" name="hide" value="register" />
							<div class="group">
								<label for="user" class="label">点击注册</label>
								<input type="submit" class="button" value="注册">
							</div>
						</form>

						<div class="hr"></div>

					</div>

				</div>
			</div>
		</div>
	</div>

	<script>

		
		////注册js
		let phone = $("#form input"), span = $("span");
		phone.blur(e => {
			var target = e.target;
			var name = $(target).attr("name");
			var next = $(target).next();
			if (name == "phone") {
				////前端判断电话号码的合理性;
				var reg = /^1[3-9][0-9]{9}$/;
				if (reg.test($(target).val())) {
					////当手机号码正确后，拿到数据库的号码对比，
					$.ajax({
						"url": "http://172.168.20.103/HUAWEI/ALL/allphp.php",
						"data": "hide=testphone",
						"dataType": "JSONP",
						// "jsonp":"key",
						"success": data => {
							console.log(data)
							data.forEach(val => {
								console.log(val.phone)
								console.log($(target).val())
								if (val.phone == $(target).val()) {
									next.html("该电话已经注册过了");
									next.css("color", "red");
									return;
								}
							})

						}
					})
					next.html("该电话可用");
					next.css("color", "green");

				} else {
					next.html("请输入正确的号码");
					next.css("color", "red");
				}
			} else if (name == "pwd") {
				////数字字母下划线特殊字符至少两种8-16位数；
				var reg = /^(?![\d]+$)(?![A-Za-z]+$)(?![.@#$%^&*!_]+$)[\w.@#$%^&*!]{8,16}$/;
				if (reg.test($(target).val())) {
					next.html("该密码可使用");
					next.css("color", "green");
				} else {
					next.html("请输入正确的密码组合");
					next.css("color", "red");
				}
			} else if (name == "pwded") {
				console.log($(target).val())
				console.log($("[name='pwd']").val())
				if ($(target).val() == $("[name='pwd']").val()) {
					next.html("");
					next.css("color", "green");
				}
				else if ($(target).val() != $("[name='pwd']").val()) {
					next.html("请保持两个密码一致");
					next.css("color", "red");
				}
			} else if (name == "yzm") {
				////判断验证码是否正确
				if ($(target).val().toLowerCase() != next.html().toLowerCase()) {
					next.next().html("验证码输入错误,重新点击获取");
					next.next().css("color", "red");
				}
			}
		})

		phone.focus(e => {
			var target = e.target;
			var name = $(target).attr("name");
			var next = $(target).next();
			////验证码输入获得焦点，清空提示
			if (name == "yzm") {
				next.next().html("");
				next.next().css("color", "#333");
			}

		})

		////点击获取验证码
		$("#yzm").click(function () {
			var arr = [];
			f1(48, 57);
			f1(65, 90);
			f1(97, 122);
			var yzms = "";
			while (yzms.length < 4) {
				c = parseInt(Math.random() * (61 + 1));
				if (yzms.indexOf(arr[c]) == -1) {
					yzms += arr[c];
				}
			}
			$(this).html(yzms);
			function f1(a, b) {
				for (var i = a; i <= b; i++) {
					arr.push(String.fromCharCode(i));
				}
			}
		})
		////提交限制
	
	

		form.onsubmit = (e) => {
			if ($("#user").val() == ""||$("#pass").val() == "") {
				return false;
			}
			span.each((i, val) => {
				if (val.style.color == "red") {
					return false;
				}
			})
		}

	</script>

</body>

</html>